<script>
import ComputedPage from './index.vue'
export default {
  components: {
    ComputedPage
  },
  data() {
    return {
      activeKey: 1,
      panes: [
        {
          title: '第1组', 
          key: 1,  
          closable: false
        }
      ],
      newTabIndex: 1,
    }
  },
  methods: {
    onEdit(targetKey, action) {
      if(action === 'add') {
        // 在最后添加一组实验
        const activeKey = `第${this.newTabIndex+=1}组`
        const currentKey = this.newTabIndex + Date.now()
        this.panes.push({
          title: `${activeKey}`,
          key: currentKey,
        })
        this.activeKey = currentKey;
      } else {
        // 删除最后一个tab
        this.newTabIndex -= 1
        let activeKey = this.activeKey;
        let lastIndex;
        this.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
        });
        const panes = this.panes.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
          if (lastIndex >= 0) {
            activeKey = panes[lastIndex].key;
          } else {
            activeKey = panes[0].key;
          }
        }
        this.panes = panes;
        this.activeKey = activeKey;
      }
    },
  }
}

</script>
<template>
  <div class="card-contarin">
    <a-tabs 
      v-model="activeKey" 
      type="editable-card" 
      @edit="onEdit">
      <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
        <ComputedPage></ComputedPage>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<style lang='scss' scoped>
.card-contarin {
  padding: 40px;
}
</style>